<template>
    <div class="special-bottom_title">
        <div class="booktitle">
            <h3 style="color: #000;" @click="tzFn">{{specialTitle}}</h3>
            <div class="status" :style="styleObject">{{status}}</div>
        </div>
        <div class="allBooks" @click="tzFn">全部{{nums}}件拍品 <span>
                <el-icon>
                    <ArrowRight />
                </el-icon>
            </span></div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
    methods: {
        tzFn() {
            //跳转到详情页面，这里只是为了效果而已
            this.$router.push('online');
        }
    },
    props: {
        nums: Number,
        specialId: Number
    },
    data() {
        return {
            status: '',
            specialTitle: '',
            styleObject: {}
        }
    },
    mounted() {
        if (this.specialId === 1) {
            this.status = '预展中';
            this.specialTitle = '02 | 军旅翰墨 * 朱永清 兰保景 李宝祥中将 徐文显 马树学 谢国良 施元龙等共和国将军书法专场';
            this.styleObject =  {
                color: '#000',
                backgroundColor:'#E7F0DD'
            }
        } else {
            this.status = '今晚落槌';
            this.specialTitle = '01 | 晚清明国 地方游记 晚清小说 文学书刊 民国专场';
        }
    }
})
</script>

<style lang="scss" scoped>
.special-bottom_title {
    width: 100%;
    height: 52px;
    margin-bottom: 20px;
    position: relative;

    .booktitle {
        margin-bottom: 8px;
        height: 26px;
        display: flex;

        .status {
            width: 56px;
            padding: 0 8px;
            margin-left: 6px;
            border-radius: 5px;
            background-color: #EED7DA;
            color: #8C225E;
            text-align: center;
            line-height: 26px;
            font-size: 14px;
        }
    }

    .allBooks {
        font-size: 12px;
        color: #993D43;
        position: absolute;
        right: 0;
        bottom: 0;
    }
}
</style>